import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Overlay, Radio, Balloon, Switch } from '@teamix/ui';
import { ButtonIcon } from '@alife/devops-ui';
import track from 'utils/track';
import AtTooltip from '@txdfe/at-tooltip';
import './index.scss';
import intl from '../../../../../../../../../locale';

const { Popup } = Overlay;
const radioMap = {
  forceDiffViewType: [
    {
      label: intl.get({
        id: 'code-assets.components.diffSettingBtns.SingleColumn',
        defaultMessage: '单栏',
      }),
      value: 'unified',
    },

    {
      label: intl.get({
        id: 'code-assets.components.diffSettingBtns.DoubleColumn',
        defaultMessage: '双栏',
      }),
      value: 'split',
    },
  ],

  forceCrFileViewType: [
    {
      label: intl.get({
        id: 'code-assets.components.diffSettingBtns.AllTiled',
        defaultMessage: '全部平铺',
      }),
      value: 'all',
    },

    {
      label: intl.get({
        id: 'code-assets.components.diffSettingBtns.BrowseOneByOne',
        defaultMessage: '逐个浏览',
      }),
      value: 'single',
    },
  ],

  forceIgnoreWhitespace: [
    {
      value: 'false',
      label: intl.get({ id: 'code-assets.components.diffSettingBtns.Is', defaultMessage: '是' }),
    },

    {
      value: 'true',
      label: intl.get({ id: 'code-assets.components.diffSettingBtns.No', defaultMessage: '否' }),
    },
  ],
};

const prefix = 'diff-settig-overlay';
export default class Changes extends Component {
  static propTypes = {
    commentsVisibleStatus: PropTypes.string,
    forceCrFileViewType: PropTypes.string,
    handleFilterComment: PropTypes.func,
  };

  static defaultProps = {
    commentsVisibleStatus: 'all',
    forceCrFileViewType: 'single',
    handleFilterComment: () => {},
  };

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  onOverlayVisibleChange = (visible) => {
    const { codeReviewDetail } = this.props;
    this.setState({
      visible,
    });

    if (visible) {
      track({
        action: 'setting',
        page: 'Repo-MR-changes',
        type: '',
        control: '',
        mr_id: codeReviewDetail.id,
      });
    }
  };

  // 展示空格
  handleIgnore = (value) => {
    const { codeReviewDetail } = this.props;
    if (value) {
      track({
        action: 'view_blank',
        page: 'Repo-MR-changes',
        mr_id: codeReviewDetail.id,
      });
    } else {
      track({
        action: 'view_no_blank',
        page: 'Repo-MR-changes',
        mr_id: codeReviewDetail.id,
      });
    }

    this.props.toggleViewAndDiffAndIgnoreWhiteSpace({
      forceIgnoreWhitespace: value ? 'false' : 'true',
    });
  };

  // 评论
  handleComment = (value) => {
    this.props.handleFilterComment(value);
    this.props.toggleViewAndDiffAndIgnoreWhiteSpace({
      commentsVisibleStatus: value ? 'all' : 'none',
    });
  };

  render() {
    const {
      forceCrFileViewType,
      forceDiffViewType,
      forceIgnoreWhitespace,
      commentsVisibleStatus,
      totalCountInfo,
      isShowCodeScan,
      isShowComment,
      codeReviewDetail,
    } = this.props;

    const trigger = (
      <AtTooltip active={!this.state.visible} align="l" trigger={<ButtonIcon name="setting-3-line" />}>
        {intl.get({ id: 'code-assets.components.diffSettingBtns.Set', defaultMessage: '设置' })}
      </AtTooltip>
    );

    return (
      <Popup
        trigger={<span style={{ display: 'inline-block', height: 24 }}>{trigger}</span>}
        triggerType="click"
        // 有评论或者扫描面板时也隐藏
        visible={isShowCodeScan || isShowComment ? false : this.state.visible}
        onVisibleChange={this.onOverlayVisibleChange}
      >
        <div className={`${prefix} overlay-shadow`}>
          <div className={`${prefix}-title`}>
            {intl.get({
              id: 'code-assets.components.diffSettingBtns.DiffView',
              defaultMessage: 'Diff视图：',
            })}
          </div>
          <div className={`${prefix}-radio`}>
            <Radio.Group
              dataSource={radioMap.forceDiffViewType}
              value={forceDiffViewType}
              onChange={(value) => {
                if (value === 'unified') {
                  track({
                    action: 'view_diff_inline',
                    page: 'Repo-MR-changes',
                    mr_id: codeReviewDetail.id,
                  });
                } else {
                  track({
                    action: 'view_diff_sidebyside',
                    page: 'Repo-MR-changes',
                    mr_id: codeReviewDetail.id,
                  });
                }
                this.props.toggleViewAndDiffAndIgnoreWhiteSpace({
                  forceDiffViewType: value,
                });
              }}
            />
          </div>
          <div className={`${prefix}-title`}>
            {intl.get({
              id: 'code-assets.components.diffSettingBtns.FileBrowsingMode',
              defaultMessage: '文件浏览模式：',
            })}
          </div>
          <div className={`${prefix}-radio`}>
            <Radio.Group
              value={forceCrFileViewType}
              onChange={(value) => {
                if (value === 'all') {
                  track({
                    action: 'view_all',
                    page: 'Repo-MR-changes',
                    mr_id: codeReviewDetail.id,
                  });
                } else {
                  track({
                    action: 'view_single',
                    page: 'Repo-MR-changes',
                    mr_id: codeReviewDetail.id,
                  });
                }

                this.props.toggleViewAndDiffAndIgnoreWhiteSpace({
                  forceCrFileViewType: value,
                });
              }}
            >
              {radioMap.forceCrFileViewType.map((item) => {
                if (item.value === 'single') {
                  return <Radio value={item.value}>{item.label}</Radio>;
                }
                const isLineTooMany = totalCountInfo.curLineCount > totalCountInfo.maxLineCount;
                const isFileTooMany = totalCountInfo.curFileCount > totalCountInfo.maxFileCount;
                if (isLineTooMany || isFileTooMany) {
                  return (
                    <Balloon.Tooltip
                      align="t"
                      trigger={
                        <Radio value={item.value} disabled style={{ marginRight: 20 }}>
                          {item.label}
                        </Radio>
                      }
                    >
                      {isLineTooMany
                        ? intl.get({
                            id: 'code-assets.components.diffSettingBtns.YouCannotUseTheTile',
                            defaultMessage: '改动行数过多，无法使用平铺浏览模式',
                          })
                        : intl.get({
                            id: 'code-assets.components.diffSettingBtns.YouCannotUseTileBrowsing',
                            defaultMessage: '改动行/文件数过多，无法使用平铺浏览模式',
                          })}
                    </Balloon.Tooltip>
                  );
                } else {
                  return <Radio value={item.value}>{item.label}</Radio>;
                }
              })}
            </Radio.Group>
          </div>
          <div className={`${prefix}-split`} />
          <div className={`${prefix}-switch`}>
            <Switch onChange={this.handleIgnore} checked={forceIgnoreWhitespace === 'false'} />

            <div className={`${prefix}-switch-text`}>
              {intl.get({
                id: 'code-assets.components.diffSettingBtns.ShowChangedSpaces',
                defaultMessage: '展示改动空格',
              })}
            </div>
          </div>
          <div className={`${prefix}-switch`}>
            <Switch onChange={this.handleComment} checked={commentsVisibleStatus === 'all'} />
            <div className={`${prefix}-switch-text`}>
              {intl.get({
                id: 'code-assets.components.diffSettingBtns.ShowComments',
                defaultMessage: '展示评论',
              })}
            </div>
          </div>
        </div>
      </Popup>
    );
  }
}
